<template>
  <div>
    <el-dialog
      width="40%"
      :title="!dataForm.id ? '添加采购单' : '编辑采购单'"
      :close-on-click-modal="false"
      :visible.sync="visible">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
               label-width="100px" size="mini" label-position="left">
        <el-form-item label="单据号" prop="billNo">
          <el-input v-model="dataForm.billNo" placeholder="单据号"></el-input>
        </el-form-item>
        <el-form-item label="采购人" prop="submitId">
          <el-select v-model="dataForm.submitId" clearable placeholder="请选择">
            <el-option
              v-for="item in userOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-form-item label="产线" prop="productionLineId">
                <el-select v-model="dataForm.productionLineId" clearable placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8" :offset="4">
            <div class="grid-content bg-purple-light">
              <el-button type="danger" icon="el-icon-delete" @click="clearTopData()" size="mini">清空</el-button>
            </div>
          </el-col>
        </el-row>
        <hr style="opacity: 0.3">
        <br>
        <el-form-item
          v-for="(jig, index) in dataForm.jigs"
          :label="'工夹具代码' + index "
          :key="jig.key"
          :prop="'jigs.' + index"
          :rules="{
                required: true, message: '不能为空', trigger: 'blur'
              }"
        >
          <el-row>
            <el-col :span="6">
              <el-select v-model="jig.code" placeholder="请选择">
                <el-option
                  v-for="item in codeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2" :offset="1">
              数量{{index}}
            </el-col>
            <el-col :span="8" :offset="1">
              <el-input-number v-model="jig.count" controls-position="right" @change="handleChange" :min="1" :max="10000"></el-input-number>
            </el-col>
            <el-col :span="2">
              <el-button @click.prevent="removeDomain(jig)" icon="el-icon-minus" circle size="mini" style="position: relative;top: -3px"></el-button>
            </el-col>
            <el-col :span="2" :offset="1">
              <el-button v-if="index == dataForm.jigs.length - 1" @click="addDomain" icon="el-icon-plus" size="mini" style="position: relative;top: -3px" circle></el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <hr style="opacity: 0.3">
      <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "purchaseincomesubmitmine-add-or-update",
  data() {
    return {
      userOptions:[
        {value:'1215072',label: 'user1'},
        {value:'1230936',label: 'user2'}
      ],
      codeOptions: [
        {
          value: "EF2238",
          label: "EF2238"
        },
        {
          value: "EF2187",
          label: "EF2187"
        }
      ],
      options: [
        {label:'BLKA15-L2',value:1},
        {label:'BLKA10-L2',value:2},
      ],
      visible: false,
      dataForm: {
        submitId: '',
        billNo: '',
        jigs: [{
          code: '',
          count: 1
        }],
        email: ''
      },
      dataRule: {
        billNo: [
          {required: true, message: '单据号不能为空', trigger: 'blur'}
        ],
        submitId: [
          {required: true, message: '申请人id不能为空', trigger: 'blur'}
        ],
        productionLineId: [
          {required: true, message: '产线不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    removeDomain(item) {
      var index = this.dataForm.jigs.indexOf(item)
      if (index !== -1) {
        this.dataForm.jigs.splice(index, 1)
      }
    },
    addDomain() {
      this.dataForm.jigs.push({
        code: '',
        key: Date.now()
      });
    },
    handleChange(value) {
    },
    clearTopData() {
      this.dataForm.billNo = ''
      this.dataForm.submitId = ''
      this.dataForm.productionLineId = ''
    },
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.id) {
          this.$http({
            url: `http://localhost:10000/gongjiajumain/scrapsubmithistory/info/${this.dataForm.id}`,
            method: 'get',
            params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.seqId = data.scrapSubmitHistory.seqId
              this.dataForm.code = data.scrapSubmitHistory.code
              this.dataForm.submitId = data.scrapSubmitHistory.submitId
              this.dataForm.usedCount = data.scrapSubmitHistory.usedCount
              this.dataForm.scrapReason = data.scrapSubmitHistory.scrapReason
              this.dataForm.scrapPhotoUrl = data.scrapSubmitHistory.scrapPhotoUrl
              this.dataForm.firstAcceptor = data.scrapSubmitHistory.firstAcceptor
              this.dataForm.firstTime = data.scrapSubmitHistory.firstTime
              this.dataForm.firstReason = data.scrapSubmitHistory.firstReason
              this.dataForm.finalAcceptor = data.scrapSubmitHistory.finalAcceptor
              this.dataForm.finalTime = data.scrapSubmitHistory.finalTime
              this.dataForm.finalReason = data.scrapSubmitHistory.finalReason
              this.dataForm.status = data.scrapSubmitHistory.status
            }
          })
        }
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$http.post(`http://localhost:10000/gongjiajumain/purchaseincomesubmit/saveInfo`,this.dataForm)
      .then(res=>{
        console.log(res)
        this.$message({
          message: '添加成功咯~',
          type: 'success'
        });
        this.visible = false
        this.$emit('refreshDataList')
      })
      // this.$refs['dataForm'].validate((valid) => {
      //   if (valid) {
      //     this.$http({
      //       url: this.$http.adornUrl(`/gongjiajumain/scrapsubmithistory/${!this.dataForm.id ? 'save' : 'update'}`),
      //       method: 'post',
      //       data: this.$http.adornData({
      //         'id': this.dataForm.id || undefined,
      //         'seqId': this.dataForm.seqId,
      //         'code': this.dataForm.code,
      //         'submitId': this.dataForm.submitId,
      //         'usedCount': this.dataForm.usedCount,
      //         'scrapReason': this.dataForm.scrapReason,
      //         'scrapPhotoUrl': this.dataForm.scrapPhotoUrl,
      //         'firstAcceptor': this.dataForm.firstAcceptor,
      //         'firstTime': this.dataForm.firstTime,
      //         'firstReason': this.dataForm.firstReason,
      //         'finalAcceptor': this.dataForm.finalAcceptor,
      //         'finalTime': this.dataForm.finalTime,
      //         'finalReason': this.dataForm.finalReason,
      //         'status': this.dataForm.status
      //       })
      //     }).then(({data}) => {
      //       if (data && data.code === 0) {
      //         this.$message({
      //           message: '操作成功',
      //           type: 'success',
      //           duration: 1500,
      //           onClose: () => {
      //             this.visible = false
      //             this.$emit('refreshDataList')
      //           }
      //         })
      //       } else {
      //         this.$message.error(data.msg)
      //       }
      //     })
      //   }
      // })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
